<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch"
          action="${request.getContextPath()}/FinalTrendPassYieldByMonth/finalTrendPassYieldByMonth" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="finalTrendPassYieldByMonth"/>
            <g:hiddenField name="SYS_QUERY_NAME1" value="month"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>物料编码：</label>
            <g:textField name="partName" value="${partName}" size="15" placeholder="物料编码" />&nbsp;
            <label>产品方向：</label>&nbsp;
            <g:select name="text" from="${productionScheduleTextList}" data-toggle="selectpicker" data-live-search="true"
                  optionKey="text" optionValue="text" value="${text}" noSelection="['': 'ALL']"/>&nbsp;
            <label>产品图号：</label>&nbsp;
            <input type="text" name="tuhao" size="15" value="${tuhao}"/>&nbsp;
            %{--<label >时间：</label>&nbsp;
            <input type="text" name="startTime" value="${startTime}" data-pattern="yyyy-MM"  data-toggle="datepicker" placeholder="FROM">&nbsp;
            <input type="text" name="endTime" value="${endTime}" data-pattern="yyyy-MM" data-toggle="datepicker" placeholder="TO">&nbsp;&nbsp;--}%
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/FinalTrendPassYieldByMonth/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>&nbsp;
        </div>
    </form>
</div>


<div class="bjui-pageContent">
    <g:if test="${finalTrendPassYieldByMonth.size() > 0}">
        <div id="finalTrendPassYieldByMonth" style="width:100%;height:400PX;"></div>
        <script src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data = [];
            <g:each in="${monthList}" status="i" var="tableInstance">
            data.push('${tableInstance.MONTH}');
            </g:each>
            // 指定图表的配置项和数据
            var option = {
                // 图表标题
                title: {},

                tooltip: {
                    trigger: ''
                },

                legend: {
                    data: ['实际合格率', '目标合格率']

                },
                xAxis: {
                    data: data
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '缺陷占比',
                        min: '80',
                        max: '100',
                        splitNumber: 4,
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        show: true
                    }
                ],
                series: [
                    {
                        name: '实际合格率',
                        type: 'line',
                        data: [${finalTrendPassYieldByMonth[0].M1}, ${finalTrendPassYieldByMonth[0].M2}, ${finalTrendPassYieldByMonth[0].M3}, ${finalTrendPassYieldByMonth[0].M4}, ${finalTrendPassYieldByMonth[0].M5}, ${finalTrendPassYieldByMonth[0].M6}
                            , ${finalTrendPassYieldByMonth[0].M7}, ${finalTrendPassYieldByMonth[0].M8}, ${finalTrendPassYieldByMonth[0].M9}, ${finalTrendPassYieldByMonth[0].M10}, ${finalTrendPassYieldByMonth[0].M11}, ${finalTrendPassYieldByMonth[0].M12}, ${finalTrendPassYieldByMonth[0].M13}]
                    },
                    {
                        name: '目标合格率',
                        type: 'line',
                        data: [${finalTrendPassYieldByMonth[1].M1}, ${finalTrendPassYieldByMonth[1].M2}, ${finalTrendPassYieldByMonth[1].M3}, ${finalTrendPassYieldByMonth[1].M4}, ${finalTrendPassYieldByMonth[1].M5}, ${finalTrendPassYieldByMonth[1].M6}
                            , ${finalTrendPassYieldByMonth[1].M7}, ${finalTrendPassYieldByMonth[1].M8}, ${finalTrendPassYieldByMonth[1].M9}, ${finalTrendPassYieldByMonth[1].M10}, ${finalTrendPassYieldByMonth[1].M11}, ${finalTrendPassYieldByMonth[1].M12}, ${finalTrendPassYieldByMonth[1].M13}]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("roma", document.getElementById('finalTrendPassYieldByMonth'), option);
        </script>

        <div>
            <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr id="t1">
                    <th width="35">月份</th>
                    <g:each in="${list}" status="j" var="headInstance">
                        <g:if test="${headInstance != 'RN' && headInstance != 'BS'}">
                            <th width="35"><g:message code="${headInstance}" default="${headInstance}"/></th>
                        </g:if>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <g:if test="${finalTrendPassYieldByMonth.size() > 0}">
                    <g:each in="${finalTrendPassYieldByMonth}" status="i" var="dataInstance">
                        <tr>
                            <td>${dataInstance.BS}</td>
                            <g:each in="${tableHeadList}" status="j" var="headInstance">
                                <g:if test="${headInstance != 'RN' && headInstance != 'BS'}">
                                    <td>${dataInstance["${headInstance}"]}</td>
                                </g:if>
                            </g:each>
                        </tr>
                    </g:each>

                </g:if>
                <g:else>
                    <g:render template="../template/emptyPanel"/>
                </g:else>
                </tbody>
            </table>
        </div>
    </g:if>
</div>

